<template>
    <div>
       <h2>全部的工资：{{ all }}</h2>
       <h3>工龄：{{ info.workAge }}
        <button @click="info.workAge++">自增</button>
       </h3>
       <h3>等级：{{ info.title.lev }}
        <button @click="info.title.lev++">自增</button>
       </h3>
    </div>
</template>


<script setup>
import { watch, ref, reactive } from 'vue';
const all=ref(10) 
const info=reactive(
    {
        workAge:0,
        title:{
            name:'教授',
            lev:2
        }
    }    
)

// watch(info,(newVal,oldVal)=>{
//     console.log(newVal);
//     console.log(newVal.title.lev);
//     all.value=10+newVal.workAge*0.1+(newVal.title.lev-1)*0.5
// },)


// watch(
//     ()=>info.workAge,(newValue,oldVal)=>{
//         console.log(newValue);
//         all.value +=0.1
//     }
// )
// watch(
//     ()=>info.title,(newValue,oldVal)=>{
//         console.log(newValue);
//         all.value +=0.5
//     },{deep:true}
// )

watch([()=>info.workAge,()=>info.title],(newVal,oldVal)=>{
    console.log(newVal);
    all.value=10+newVal[0]*0.1+(newVal[1].lev-1)*0.5
},{deep:true})






</script>



<style scoped></style>